<!DOCTYPE html>
<html>
<head>
	<title>登录页面</title>
<!-- metatags-->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="" />
	<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
	function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Meta tag Keywords -->
<!-- Custom-Style-Sheet -->
	<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all" />
	<link href="css/style1.css" rel="stylesheet" type="text/css" media="all"/><!--style_sheet-->
	<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" property="" />
	<link rel="stylesheet" href="css/font-awesome.css"> <!-- Font-Awesome_Icons-CSS -->
<!--//Custom-Style-Sheet -->
<!--online_fonts-->	
	<link href="http://maxcdn.bootstrapcdn.com/css?family=Audiowide" rel="stylesheet">
	<link href="http://maxcdn.bootstrapcdn.com/css?family=Montserrat+Alternates" rel="stylesheet">
<!--//online_fonts-->
</head>
<body>
<div class="w3l-head">
	<h1>登录界面</h1>
</div>
<div class="w3l-main">
<div class="w3l-left-side">
	
<div class="flexslider">
  <ul class="slides">

    <li>
      <img src="images/1.jpg" alt="image"/>
    </li>
	<li>
		<img src="images/4.jpg" alt="image"/>
	  </li>
	  <li>
		<img src="images/3.jpg" alt="image"/>
	  </li>
	<li>
      <img src="images/2.jpg" alt="image"/>
    </li>
  </ul>
</div>
</div>

<div class="w3l-rigt-side">
	<form action="#" method="post">
		<div class="w3l-signin">
			<a class="w3_play_icon1" href="#small-dialog1"> 登 录</a>
		</div>
		<div class="w3l-signup">
			<a class="w3_play_icon1" href="#small-dialog2"> 注 册</a>
		</div>
		<div class="clear"></div>
	</form>	
</div>
<div class="clear"></div>
</div>

<!--sign in form -->
<div id="small-dialog1" class="mfp-hide">
	<div class="wthree-container">
		<div class="wthree-form">
			<div class="agileits-2">
				<h2>登 录</h2>
			</div>
				<div class="w3-user">
					<span><i class="fa fa-user-o" aria-hidden="true"></i></span>
					<input type="text" name="Username" placeholder="用户名" required="" id="loginUsername">
				</div>
				<div class="clear"></div>
				<div class="w3-psw">
					<span><i class="fa fa-key" aria-hidden="true"></i></span>
					<input type="password" name="password" placeholder="密码" required="" id="loginPassword">
				</div>
				<div class="clear"></div>
				<div class="clear"></div>
				<div class="signin">
					<input type="submit" value="登 录" id="loginButton">
				</div>
				<div class="clear"></div>
		</div>
	</div>
</div>
<!--sign in form -->
<!-- for register popup -->

<!--sign up form -->
<div id="small-dialog2" class="mfp-hide">
	<div class="wthree-container">
		<div class="wthree-form bg">	
			<div class="agileits-2">
				<h2>注 册</h2>
			</div>
				<div class="w3-user">
					<span><i class="fa fa-user-o" aria-hidden="true"></i></span>
					<input type="text" name="Username" placeholder="用户名" required="" id="RegUsername">
				</div>
				<div class="clear"></div>
				<div class="w3-psw">
					<span><i class="fa fa-key" aria-hidden="true"></i></span>
					<input type="password" name="password" placeholder="密码" required="" id="RegPassword1">
				</div>
				<div class="w3-cpsw">
					<span><i class="fa fa-key" aria-hidden="true"></i></span>
					<input type="password" name="password" placeholder="确认密码" required="" id="RegPassword2">
				</div>
				<div class="clear"></div>
				<div class="w3l-check">
					<input type="checkbox" class="checkbox" id="checkbox">
					<span><a href="#">我同意并接受使用条款</a></span>  
				</div>
				<div class="clear"></div>
				<div class="signin">
					<input type="submit" value="立即注册" id="Reg">
				</div>
				<div class="clear"></div>
		</div>
	</div>
</div>
<!--sign in form -->	
<!-- //for register popup -->
<footer><p>
	<!-- Link back to  can't be removed. Template is licensed under CC BY 3.0. -->
	Wz Finished It &copy;<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>document.write(new Date().getFullYear());</script> 
	<!-- Link back to  can't be removed. Template is licensed under CC BY 3.0. -->
	</p></footer>

	
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>

<!-- pop-up-box-js-file -->  
	<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
<!--//pop-up-box-js-file -->
<script>
	$(document).ready(function() {
	$('.w3_play_icon,.w3_play_icon1,.w3_play_icon2').magnificPopup({
		type: 'inline',
		fixedContentPos: false,
		fixedBgPos: true,
		overflowY: 'auto',
		closeBtnInside: true,
		preloader: false,
		midClick: true,
		removalDelay: 300,
		mainClass: 'my-mfp-zoom-in'
	});
																	
	});
</script>
<!-- flexSlider -->
	<script defer src="js/jquery.flexslider.js"></script>
	<script type="text/javascript">
		$(window).load(function(){
		  $('.flexslider').flexslider({
			animation: "slide",
			start: function(slider){
			  $('body').removeClass('loading');
			}
		  });
		});
	</script>
<!-- //flexSlider -->
	<script>
		let loginButton = document.querySelector('#loginButton');
		loginButton.onclick = function() {
			let username = document.querySelector('#loginUsername');
			let password = document.querySelector('#loginPassword');
			if (username.value.trim() == ""){
                alert('请先输入用户名!');
                username.focus();
                return;
            }
            if (password.value.trim() == ""){
                alert('请先输入密码!');
                password.focus();
                return;
            }
            $.ajax({
                url: "user/login",
                method: "POST",
                data: JSON.stringify({username: username.value.trim(), password: password.value.trim()}),
                contentType: "application/json;charset=utf-8",
                success: function(data, status) {
                    if(data.status == 1) {
                        location.assign("index.html");
                    }else{
                        alert(data.message);
                        username.value="";
                        password.value="";
                        username.focus();
                    }
                }
			})
		}

		let Reg = document.querySelector('#Reg');
		Reg.onclick = function() {
			let username = document.querySelector('#RegUsername');
			let password1 = document.querySelector('#RegPassword1');
			let password2 = document.querySelector('#RegPassword2');
			if(!$('#checkbox').is(':checked')) {
				alert("请勾选条款");
				return;
			}
			if(username.value.trim() == ""){
                alert("请先输入用户名!");
                username.focus();
                return;
            }
            if(password1.value.trim() == ""){
                alert('请先输入密码!');
                password1.focus();
                return;
            }
            if(password2.value.trim() == ""){
                alert('请再次输入密码!');
                password2.focus();
                return;
            }
			if(username.value.trim().length > 20) {
				alert("用户名长度过长");
				username.value="";
				username.focus();
				return;
			}
			if(password1.value.trim() != password2.value.trim()) {
                alert('两次输入的密码不同!');
                passwrod1.value="";
                password2.value="";
                return;
            }
			if(password1.value.trim().length > 255) {
				alert("当前密码长度过长!");
				password1.value="";
				password2.value="";
				password1.focus();
				return;
			}
			$.ajax({
                url: "user/register",
                method: "POST",
                data: JSON.stringify({username: username.value.trim(), password: password1.value.trim()}),
                contentType: "application/json;charset=utf-8",
                success: function(data,status){
                    if(data.status == 1) {
						alert(data.message);
						location.assign("login.html");
					}else{
						alert(data.message);
						username.value="";
                        password1.value="";
                        password2.value="";
                        username.focus();
					}
                }
            })
		}
	</script>
</body>
</html>